/**
 * 下拉 + 树
 * @Author puyuxuan
 * @date 2022-8-17
 */
import { TreeSelect } from 'antd'
import React, { useImperativeHandle, useState } from 'react'

const AuthTreeSelect = (props) => {
  const {
    TreeSelectRef,
    showSearch = true, //是否支持搜索框
    style,
    dropdownStyle = {
      maxHeight: 400,
      overflow: 'auto',
    },
    fieldNames, //	自定义节点 label、value、children 的字段
    treeNodeFilterProp, //设置过滤字段，默认是value
    filterTreeNode = true, //是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值
    placeholder = '请输入选择',
    allowClear = true, //显示清除按钮
    treeDefaultExpandAll = true, //默认展开树节点
    treeLine = { showLeafIcon: false }, //是否展示线条样式 , true:全部展示，false全部不展示，{ showLeafIcon: false }展示线，不展示icon
    treeSelectData,
  } = props

  // const [value, setValue] = useState({ value: '', label: '' })
  // const [label, setLabel] = useState(undefined)
  const [value, setValue] = useState([])
  const [label, setLabel] = useState(undefined)
  const [treeData, setTreeData] = useState(treeSelectData)

  const onChange = (e, label, extra) => {
    setValue(e)
    setLabel(label)
  }

  useImperativeHandle(TreeSelectRef, () => {
    return {
      getValue: () => value,
      setValue: (e) => setValue(e),
      getLabel: () => label,
      // setLabel: (e) => setLabel(e),
      getTreeData: () => treeData,
      setTreeData: (e) => setTreeData(e),
    }
  })

  return (
    <TreeSelect
      // labelInValue
      showSearch={showSearch}
      style={style}
      value={value}
      dropdownStyle={dropdownStyle}
      fieldNames={fieldNames}
      treeNodeFilterProp={treeNodeFilterProp}
      filterTreeNode={filterTreeNode}
      treeLine={treeLine}
      placeholder={placeholder}
      allowClear={allowClear}
      treeDefaultExpandAll={treeDefaultExpandAll}
      onChange={onChange}
      treeData={treeData}
      multiple
    ></TreeSelect>
  )
}

export default AuthTreeSelect
